<template>
	<view class="plr15">
		<view class="plt15 flex">
			<view class="col3">
				<view class="cl-info ft13">可提现余额</view>
				<view class="ft14 cl-h mt10">￥<span class="ft28">{{tx_money}}</span></view>
			</view>
			<!-- 			<view class="col3">
				<view class="flex alcenter">
					<view class="cl-info ft13 mr5">冻结金额</view>
					<image src="../../static/images/tixian04.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<view class="ft14 mt10 cl-info">￥<span class="ft28">{{info.dj_money}}</span></view>
			</view> -->
		</view>
		<view v-if="open!=1">
			<view class="plt15">
				<view class="cl-text ft16">提现至</view>
				<view class="flex mt15 spaceb">
					<view class="item" v-for="(item,index) in tixianList" :class="{'act':current===index}"
						@click="tabclick(index)">
						<image :src="item.image" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="ml5">{{item.type}}</view>
						<!-- <image src="../../static/images/xuan_active.png" mode="" v-if="current===index"
						style="width: 36rpx;height: 36rpx;position: absolute;top: -2rpx;left: -2rpx;border-radius: 10rpx 0 0 0;">
					</image> -->
					</view>
				</view>
			</view>
			<view class="plt15" v-if="current!=2">
				<view class="cl-text ft16">姓名</view>
				<view class="input mt15 pd10_15">
					<input type="text" placeholder="请输入姓名" v-model="name">
				</view>
			</view>
			<view class="plt15" v-if="current==0">
				<view class="cl-text ft16">支付宝账号</view>
				<view class="input mt15 pd10_15">
					<input type="text" placeholder="请输入支付宝账号" v-model="zhanghao">
				</view>
			</view>
			<view class="plt15" v-if="current==2">
				<view class="cl-text ft16">银行卡号</view>
				<view class="input mt15 pd10_15">
					<input type="text" placeholder="请输入银行卡号" v-model="zhanghao">
				</view>
			</view>
			<view class="plt15" v-if="current==2">
				<view class="cl-text ft16">开户行</view>
				<view class="input mt15 pd10_15">
					<input type="text" placeholder="请输入开户行" v-model="kaihuhang">
				</view>
			</view>
			<view class="plt15" v-if="current==1">
				<view class="cl-text ft16">收款码</view>
				<view class="">
					<view class="mt20 flex mr10" v-if="shouKuanMa!=''"
						style="position: relative;width: 180rpx;height: 180rpx;">
						<image :src="shouKuanMa" mode="" class="br10" style="width: 180rpx;height: 180rpx;"></image>
						<image src="@/static/images/img_del.png" mode="" @click.stop="deleteimg(index)"
							style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;"></image>
					</view>
					<view class="upload-box" v-if="shouKuanMa==''" @click="uploadimg()"></view>
				</view>
			</view>
		</view>
		<view class="plt15">
			<view class="cl-text ft16">提现金额</view>
			<view class="input mt15 pd10_15 flex alcenter spaceb">
				<input type="text" placeholder="输入金额" v-model="money">
				<view class="ft15 cl-l" @click="quanbu()">全部</view>
			</view>
		</view>
		<!-- <view class="cl-text">手续费{{shouxufei}}，实扣除<span class="cl-h">{{(money*shouxufei).toFixed(2)}}</span>元</view> -->
		<view class="rechangeBtn" @click="$u.throttle(submit,2000)">提交申请</view>
		<view style="height: 10rpx;"></view>
	</view>
</template>

<script>
	import urlsa from '@/siteinfo';
	export default {
		data() {
			return {
				tixianList: [{
						image: "/static/images/tixian01.png",
						type: '支付宝'
					},
					{
						image: "/static/images/tixian02.png",
						type: '微信'
					},
					{
						image: "/static/images/tixian03.png",
						type: '银行卡'
					}
				],
				current: 0,
				name: '',
				money: '',
				zhanghao: '',
				kaihuhang: '',
				s_money: 0,
				info: [],
				shouKuanMa: '',
				shouxufei: '',
				tx_money: 0,
				type: 1, // 收款方式:1=支付宝,2=微信,3=银行卡
				open: 1
			}
		},
		onLoad(option) {
			this.tx_money = option.tx_money
			// this.init()
			// this.global.request.post({
			// 	data: {
			// 		do: 'base',
			// 		op: 'tixian_set'
			// 	},
			// 	success: res => {
			// 		this.shouxufei = res.shouxufei
			// 	}
			// })
			this.global.request.post({
				data: {
					do: 'Base',
					op: 'open'
				},
				success: res => {
					this.open = res.value
				}
			})

		},

		methods: {
			init() {
				this.global.request.post({
					data: {
						do: 'user',
						op: 'info'
					},
					success: res => {
						this.info = res
					}
				})
			},
			quanbu() {
				this.money = this.tx_money
			},
			tabclick(index) {
				this.current = index
				this.type = index + 1
			},
			input(e) {
				if (e.detail.value != '') {
					this.s_money = parseFloat(e.detail.value) + parseFloat(e.detail.value * 0.03)
				} else {
					this.s_money = 0
				}
			},
			uploadimg(type) {
				var that = this
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res => {
						var token = uni.getStorageSync("token");
						uni.uploadFile({
							header: {
								'token': token,
							},
							url: urlsa.siteroot + '/api/Common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								that.shouKuanMa = JSON.parse(uploadFileRes.data).data.fullurl
							}

						});
					}
				});
			},
			deleteimg(type, index) {
				var that = this;
				uni.showModal({
					content: '确认删除该图片吗？',
					success: function(res) {
						if (res.confirm) {
							that.shouKuanMa = ''
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submit() {
				if (this.current == 0) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						})
						return false
					}
					if (this.zhanghao == '') {
						uni.showToast({
							title: '请输入账号',
							icon: 'none'
						})
						return false
					}
					if (this.shouKuanMa == '') {
						uni.showToast({
							title: '请上传收款码',
							icon: 'none'
						})
						return false
					}
				}
				if (this.current == 1) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						})
						return false
					}
					if (this.shouKuanMa == '') {
						uni.showToast({
							title: '请上传收款码',
							icon: 'none'
						})
						return false
					}
				}
				if (this.current == 2) {
					if (this.name == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						})
						return false
					}
					if (this.zhanghao == '') {
						uni.showToast({
							title: '请输入账号',
							icon: 'none'
						})
						return false
					}
					if (this.kaihuhang == '') {
						uni.showToast({
							title: '请输入开户行',
							icon: 'none'
						})
						return false
					}
				}
				if (this.money == '') {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
					return false
				}
				if (this.money > this.tx_money) {
					uni.showToast({
						title: '可提现金额不足',
						icon: 'none'
					})
					return false
				}
				this.global.request.post({
					data: {
						do: 'my',
						op: 'sqtx',
						money: this.money,
						type: this.type,
						zhanghu: this.zhanghao,
						name: this.name,
						khh: this.kaihuhang,
						lx: 2 ,//1=代理提现,2=商家提现,3=用户提现
						thumb: this.shouKuanMa
					},
					success: res => {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.border-bottom {
		border-bottom: 1px solid #F4F4F4;
	}

	.upload-box {
		margin-top: 40rpx;
		width: 180rpx;
		height: 180rpx;
		background: #ECEFEF;
		position: relative;
		border-radius: 10rpx;
	}

	.upload-box::before {
		width: 2px;
		height: 39.5px;
	}

	.upload-box::after {
		width: 39.5px;
		height: 2px;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
	}

	.input {
		border: 1px solid #ECEFEF;
		border-radius: 30rpx;
	}

	.rechangeBtn {
		height: 80rpx;
		box-shadow: 0px 8px 12px 1px rgba(38, 180, 169, 0.2);
		border-radius: 30rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #fff;
		margin-top: 80rpx;
		margin-bottom: 60rpx;
		background-color: #EB702D;
	}

	.background01 {
		background: #B0F1ED;
	}

	.background02 {
		background: linear-gradient(180deg, #48E2D2 0%, #27D4D4 100%);
	}

	.item {
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		background: #ECEFEF;
		border-radius: 10rpx;
		color: #333333;
		position: relative;
	}

	.act {
		border: 2px solid #EB702D;
		background: #fff;
		color: #666666;
	}

	.hover {
		background: #ECEFEF;
		color: #000;
	}
</style>
